<template>
  <div class="content">
    <!-- 标题 -->
    <h1 class="title">{{ data.title }}</h1>
    <!-- 副标题 -->
    <div class="sub-content">
      <a-space>
        <span>发表于: {{ publishedAt }}</span>
        <span>|</span>
        <span>作者: {{ data.author }}</span>
      </a-space>
    </div>
    <!-- 文章概要 -->
    <div class="summary">{{ data.summary }}</div>
    <!-- 详情跳转 -->
    <div>
      <a-button type="outline" class="more_btn" @click="jumpToDetail"
        >阅读全文 >>
      </a-button>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { computed } from "vue";

// 获取router
const router = useRouter();

const props = defineProps({
  data: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default() {
      return {};
    },
  },
});

// 一个计算属性 ref
const publishedAt = computed(() => {
  const t = new Date(props.data.pulished_at * 1000);
  return t.toLocaleString();
});

// 跳转到详情页
const jumpToDetail = () => {
  router.push({ name: "FrontendBlogDetail", query: { id: props.data.id } });
};
</script>

<style lang="css" scoped>
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  color: #555;
}

.sub-content {
  color: #999;
  font-size: 12px;
  margin-bottom: 20px;
}

.summary {
  margin-bottom: 20px;
  color: #333;
}

.more_btn {
  border: 1px dashed #999;
  color: #999;
}
</style>
